<template>
  <div>

    <div class="main-box content">
      <div class="area-top-list">
        <div class="area-top">
          <span :class="select==index?'atv':''" @click="bindNavSole(itme,index)" v-for="itme,index in classTypeSole.SunClass" :key="index">{{itme.names}}</span>
        </div>
        <div class="seach">
          <el-input placeholder="请输入搜索内容" @clear="bindClear" :clearable="true" size="mini" v-model="searchInput" @input="searchInput = searchInput.replace(/\s*/g,'')">
            <el-button class="but-pay" @click="bindSeach" size="mini" slot="append" icon="el-icon-search"></el-button>
          </el-input>

          <!-- <el-input size="mini" placeholder="请输入内容" suffix-icon="el-icon-search" v-model="input4" ></el-input> -->
          <!-- <el-autocomplete size="mini" :trigger-on-focus="false" v-model="searchInput" slot="append" prefix-icon="el-icon-search" :fetch-suggestions="querySearch" placeholder="输入搜索内容" @input="searchInput = searchInput.replace(/\s*/g,'')" @select="handleInputSelect">
          </el-autocomplete> -->
        </div>
      </div>

      <div class="area-box" id="area-box">
        <div class="resultList">
          <div class="good-list" v-for="itme,index in resultList" :key="index">
            <router-link tag="a" target="_blank" :to="{path:'./detail',query:{id:itme.id}}">
              <div class="good-img">
                <img :src="itme.suolueImg" />
                <span>独家定制</span>
              </div>
              <div class="good-name">{{itme.soureName}}</div>
              <div class="good-pic general">
                <div class="pic" v-if="itme.prices>0 && itme.prices<5000">￥{{itme.prices}}</div>
                <div class="pic" v-if="itme.prices==0">免费</div>
                <div class="pic" v-if="itme.prices>=5000">联系客服</div>
                <div class="but"><span class="el-icon-view"></span>{{itme.clickNum}}</div>
              </div>
              <div class="good-title">
                <p>{{itme.typeName}}</p>
                <p style="color:#C7C7C7">{{itme.addTime}} 发布</p>
                <p class="good-bottom-txt">
                  {{itme.soureDesc?itme.soureDesc:'精品传奇网站模板框架展示，任您挑选'}}
                </p>
              </div>

            </router-link>
          </div>
        </div>
      </div>
      <div v-if='loading' style="text-align: center;"><img src="../assets/images/t-19.gif" /></div>

    </div>
    <div v-if='!loading' class="nonel">{{text}}</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      searchInput: '',
      text: '',
      select: -1,
      resultList: [],
      limit: 8,
      page: 1,
      loading: false,
      total: 0
    }
  },
  computed: {
    classTypeSole () {
      if (
        this.$store.state.classTypeSole &&
        this.$store.state.classTypeSole.SunClass.length > 0
      ) {
        this.select = -1
        this.resultList = []
        this.loading = false
        this.pid = this.$store.state.classTypeSole.PClass.id
        this.typeid = 0
        this.soureName = ''
        this.getList(1)
      } else {
        this.resultList = []
      }
      return this.$store.state.classTypeSole
    }
  },

  mounted () {
    window.addEventListener('scroll', this.onTableScroll)
  },
  updated () {},
  methods: {
    handleInputSelect (e) {
      // let routeData = this.$router.resolve({
      //   path: './detail',
      //   query: { id: e.id }
      // })
      // window.open(routeData.href, '_blank')
      this.$router.push({ path: './detail', query: { id: e.id } })
    },
    // querySearch (queryString, cb) {
    //   if (queryString != '') {
    //     var restaurants = []
    //     var results
    //     this.$apis.findbyname({ soureName: queryString }).then(res => {
    //       res.data.data.list.map(item => {
    //         restaurants.push({
    //           id: item.id,
    //           value: item.soureName
    //         })
    //       })
    //       results = queryString
    //         ? restaurants.filter(this.createStateFilter(queryString))
    //         : restaurants
    //       cb(results)
    //     })
    //   }
    // },
    // createStateFilter (queryString) {
    //   return state => {
    //     return (
    //       state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    //     )
    //   }
    // },
    bindNavSole (itme, index) {
      if (this.select == index) {
        return
      }
      sessionStorage.setItem('page', 1)
      this.select = index
      this.typeid = itme.id
      this.pid = 9999
      this.resultList = []
      this.soureName = ''
      this.getList(1)
    },
    bindClear () {
      this.soureName = this.searchInput
      this.getList(1)
    },
    bindSeach () {
      if (this.searchInput == '') {
        return
      }
      this.soureName = this.searchInput
      this.getList(1)
    },
    getList (e) {
      this.loading = true
      this.$apis
        .getList({
          limit: this.limit,
          page: e,
          typeid: this.typeid,
          pid: this.pid,
          soureName: this.soureName
        })
        .then(res => {
          this.resultList = res.data.data.list
          this.total = res.data.data.total
          this.loading = false
        })
    },
    godetail (e) {
      // this.$router.push({path:'./detail',query:{id:e}})
      // let routeData = this.$router.resolve({ path: './detail', query: {  id: 1 } });
      // window.open(routeData.href, '_blank');
    },
    onTableScroll () {
      let bottomHeight =
        document.documentElement.offsetHeight -
        document.documentElement.scrollTop -
        window.innerHeight
      if (bottomHeight <= 0 && !this.loading) {
        const self = this
        this.text = '下拉加载...'
        var index = Number(sessionStorage.getItem('page'))
        if (this.total > this.limit * index) {
          this.loading = true
          var time = setTimeout(() => {
            index += 1
            sessionStorage.setItem('page', index)
            self.$apis
              .getList({
                limit: this.limit,
                page: index,
                typeid: this.typeid,
                pid: this.pid
              })
              .then(res => {
                if (res.data.data.list.length > 0) {
                  res.data.data.list.map(itme => {
                    this.resultList.push(itme)
                  })
                  this.total = res.data.data.total
                } else {
                  this.text = '没有更多了...'
                }

                this.loading = false
                clearTimeout(time)
              })
          }, 500)
        } else {
          this.text = '没有更多了...'
        }
      }
    }
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.onTableScroll)
  }
}
</script>

<style lang="less" scoped>
.good-bottom-txt {
  font-size: 12px;
  color: #6e6e6e;
  text-align: center;
  padding: 13px 0px;
  border-top: 1px solid #dfdede;
  margin-top: 16px;
}
.main-box {
  // margin-top: 60px;
  min-height: calc(100vh - 310px);
}
.content {
  overflow: initial;
}
.area-top {
  font-size: 14px;
  color: #a09e9f;
  font-weight: 600;
}
.area-top span {
  margin-right: 40px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s;
  font-size: 14px;
}

.area-top span:hover,
.area-top span.atv {
  color: #000000;
  font-size: 14px;
}
.good-list {
  background: #fff;
  cursor: pointer;

  box-sizing: border-box;
}
.good-list:nth-child(3n + 4) {
  margin-right: 0px;
}
.good-list:hover {
  box-shadow: 0 5px 10px #00000026;
}
.good-img {
  width: 100%;
  // height: 370px;
  text-align: center;
  // line-height: 370px;
  position: relative;
}
.good-img img {
  width: 100%;

  max-height: 370px;
}
.good-img span {
  background: #f68704;
  font-size: 14px;
  font-family: SimHei;
  font-weight: 400;
  color: #ffffff;
  position: absolute;
  width: 68px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  top: 0px;
  left: 0px;
}
.good-name {
  font-size: 20px;
  font-weight: 600;
  color: #333333;
  text-align: center;
  padding-top: 11px;
}
.good-title {
  padding: 0px 10px;
  font-size: 14px;
  font-family: SimHei;
  font-weight: 600;
  color: #6e6e6e;
  line-height: 20px;
}
.good-pic {
  padding: 0px 10px;
  margin: 16px 0px;
  .pic {
    font-size: 16px;
    font-family: SimHei;
    font-weight: 600;
    color: #d92b4a;
  }
  .but {
    font-size: 14px;
    font-family: SimHei;
    font-weight: 400;
    color: #6e6e6e;
    cursor: pointer;
    span {
      padding-right: 5px;
    }
  }
}
.resultList {
  display: grid;
  grid-template-columns: repeat(4, 310px);
  grid-gap: 39px 20px;
}
.nonel {
  text-align: center;
  padding-top: 40px;
  color: #b9b9b9;
}
.area-top-list {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #d1d1d1;
  margin: 20px 0px;
  padding: 10px 0px;
  align-items: center;
}
</style>
